<template>
  <el-card>
    <div class="dashboard">
      <!-- 顶部区域 -->
      <div class="top-section">
        <!-- 左侧用户信息卡片 -->
        <div class="user-card">
          <div class="card-header">
            <el-avatar class="avatar" :src="admin.avatar" shape="square" :size="40"></el-avatar>
            <span class="username">{{ admin.username }}</span>
          </div>
          <div class="info">
            <p>登录时间：{{ loginInfo.loginTime }}</p>
            <p>登录地点：{{ loginInfo.loginPlace }}</p>
          </div>
        </div>

        <!-- 右侧统计信息 -->
        <div class="stats-card">
          <div class="card-header">{{ currentMonth }}月统计信息</div>
          <div class="stats-container">
            <div v-for="(stat, index) in statsData" :key="index" class="stat-item">
              <div class="icon-section" :style="{ color:stat.color,backgroundColor: white }">
                <el-icon :size="90"><Memo /></el-icon>
              </div>
              <div class="content-section">
                <p class="number">{{ stat.value }}</p>
                <p>{{ stat.label }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="charts-container">
        <div class="chart-box">
          <div ref="salesVolumeChart" style="width: 100%; height:400px;"></div>
        </div>
        <div class="chart-box">
          <div ref="orderQuantityChart" style="width: 100%; height:400px;"></div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import * as echarts from "echarts"
import { Memo, ShoppingCart, User } from "@element-plus/icons-vue"
import useAdmin from '../../store/admin'

const currentMonth = new Date().getMonth() + 1

const {admin} = useAdmin();

const loginInfo = reactive({
  loginTime: new Date().toLocaleString(),
  loginPlace: '温州'
})

const statsData = [
  {
    icon: 'Memo',
    color: '#EEAD0E',
    value: 500,
    label: '商品数量(个)'
  },
  {
    icon: 'ShoppingCart', 
    color: '#AB82FF',
    value: 20,
    label: '商品分类数量(个)'
  },
  {
    icon: 'User',
    color: '#63B8FF', 
    value: 121,
    label: '用户访问次数(次)'
  }
]

const salesVolumeChart = ref(null)
const orderQuantityChart = ref(null)

const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

onMounted(() => {
  const salesChart = echarts.init(salesVolumeChart.value)
  const orderChart = echarts.init(orderQuantityChart.value)
  
  const salesOption = {
    title: {
      text: '月度销售额统计'
    },
    xAxis: {
      type: 'category',
      data: months
    },
    yAxis: {
      type: 'value',
      name: '销售额（千万元）'
    },
    series: [{
      data: [6, 7, 8.5, 9, 10, 12, 13, 9, 16, 14, 14, 13],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#1890ff'
      }
    }],
    tooltip: {
      trigger: 'axis'
    }
  }

  const orderOption = {
    title: {
      text: '月度订单量统计'  
    },
    xAxis: {
      type: 'category',
      data: months
    },
    yAxis: {
      type: 'value',
      name: '数量（个）'
    },
    series: [{
      data: [400, 450, 300, 230, 250, 300, 400, 350, 160, 350, 380, 400],
      type: 'bar',
      itemStyle: {
        color: '#1890ff'
      }
    }],
    tooltip: {
      trigger: 'axis'
    }
  }

  salesChart.setOption(salesOption)
  orderChart.setOption(orderOption)

  window.addEventListener('resize', () => {
    salesChart.resize()
    orderChart.resize()
  })
})
</script>

<style scoped>
.top-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.user-card {
  flex: 1;
  padding: 20px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.stats-card {
  flex: 3;
  padding: 20px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.stats-container {
  display: flex;
  gap: 24px;
}

.stat-item {
  flex: 1;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.icon-section {
  padding: 20px;
  border-radius: 4px;
  margin-right: 15px;
  transition: all 0.3s ease;
}

.icon-section:hover {
  transform: scale(1.05);
}

.content-section .number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.charts-container {
  display: flex;
  gap: 20px;
}

.chart-box {
  flex: 1;
  background: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.username {
  font-size: 24px;
  margin-left: 10px;
}

.info p {
  margin: 8px 0;
  color: #666;
}
</style>